<!--
 * @Date: 2020-03-16 15:49:22
 * @LastEditors: 黄栋
 * @LastEditTime: 2020-05-11 22:01:28
 * @FilePath: /cloudAdmin/src/views/market/promotion/shop/coupon2.vue
 --> 
 
<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/promotion' }">店铺营销</el-breadcrumb-item>
          <el-breadcrumb-item>满减设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-button v-if="readOnly" size="small" @click="readOnly=false">编辑信息</el-button>
      <el-form label-width="100px" size="mini">
        <!-- <el-form-item label="满减信息"></el-form-item> -->
        <el-form-item label="活动时间">
          <el-date-picker
            style="width:200px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            :readonly="readOnly"
            v-model="editForm.start_time"
          ></el-date-picker>
          <span style="margin:0 10px">-</span>
          <el-date-picker
            style="width:200px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            :readonly="readOnly"
            v-model="editForm.end_time"
          ></el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="活动类型"></el-form-item> -->
        <el-form-item label="减免类型">
          <el-radio-group :disabled="readOnly" v-model="editForm.type">
            <el-radio :label="1">最高减一次</el-radio>
            <el-radio :label="2">每满一次减一次</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider></el-divider>
        <!-- <el-form-item label="优惠内容"></el-form-item> -->
        <div class="clearfix el-rowS">
          <el-row :gutter="10">
            <el-col v-for="(item,index) in editForm.list" :key="index" :span="8">
              <el-card class="itemCard" :body-style="{padding:'10px'}">
                <div slot="header" class="clearfix">
                  <span>优惠内容{{index+1}}</span>
                  <el-button
                    style="float: right; padding: 3px 0"
                    @click="delForm(item)"
                    size="mini"
                    type="text"
                    v-if="!readOnly"
                  >删除</el-button>
                </div>
                <el-form-item label-width="60px" label="条件">
                  <el-input :readonly="readOnly" v-model="item.min_price">
                    <template slot="prepend">满</template>
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>

                <el-form-item label-width="60px" label="优惠">
                  <el-input :readonly="readOnly" v-model="item.reduce">
                    <template slot="prepend">减</template>
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-card>
            </el-col>
          </el-row>
          <el-button
            type="primary"
            style="margin-top:5px"
            icon="el-icon-plus"
            plain
            size="small"
            v-if="!readOnly"
            @click="editForm.list.push({min_price:'',reduce:''})"
          >添加优惠</el-button>
        </div>
        <el-divider></el-divider>
        <!-- <el-form-item label="优惠规则"></el-form-item> -->
        <!-- <el-form-item label="适用商品"></el-form-item> -->
        <el-form-item label="下单可用抵扣">
          <el-checkbox :disabled="readOnly" v-model="is_score">积分</el-checkbox>(勾选后，用户下单则可以同时使用)
        </el-form-item>
        <el-form-item label="下单使用优惠">
          <el-checkbox :disabled="readOnly" v-model="is_coupon">优惠券</el-checkbox>(勾选后，用户下单则可以同时使用)
        </el-form-item>
      </el-form>
      <div class="dialog-footer" style="text-align:center">
        <el-button size="small" @click="readOnly=true">取消</el-button>
        <el-button size="small" type="primary" @click="dataFormSubmit()">确定</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { edit_reduction_info, get_reduction_list } from "@/utils/api/market";
export default {
  data() {
    return {
      is_score: false,
      is_coupon: false,
      readOnly: true,
      dataListLoading: false,
      dataListSelections: [],
      editForm: {},
      tableData: [],
      visible: false,
      dataRule: {
        name: [
          { required: true, message: "快递单号不能为空", trigger: "blur" }
        ],
        reduce: [
          { required: true, message: "满减金额不能为空", trigger: "blur" }
        ],
        min_price: [
          { required: true, message: "使用最小金额不能为空", trigger: "blur" }
        ],
        member_num: [
          { required: true, message: "每人可领取数量不能为空", trigger: "blur" }
        ],
        number: [{ required: true, message: "数量不能为空", trigger: "blur" }],
        start_time: [
          { required: true, message: "有效期开始时间不能为空", trigger: "blur" }
        ],
        end_time: [
          { required: true, message: "有效期截止时间不能为空", trigger: "blur" }
        ]
      }
    };
  },

  watch: {
    is_score(newVal, oldVal) {
      this.editForm.is_score = newVal ? "1" : "2";
    },
    is_coupon(newVal, oldVal) {
      this.editForm.is_coupon = newVal ? "1" : "2";
    }
  },

  activated() {
    this.getDataList();
  },
  methods: {
    /**获取满减设置 */
    getDataList() {
      this.$http({
        url: this.$http.newApi("/home/market/coupon/get_reduction_list"),
        method: "post",
        data: this.$http.adornData({})
      }).then(res => {
        if (res.code == 200) {
          this.editForm = Object.assign({}, this.editForm, res.data);
          this.is_score = this.editForm.is_score == "1" ? true : false;
          this.is_coupon = this.editForm.is_coupon == "1" ? true : false;
        }
      });
    },
    delForm(item){
        this.$http({
        url: this.$http.newApi("/home/market/coupon/del_reduction"),
        method: "post",
        data: this.$http.adornData({id:item.id})
      }).then(res => { 
        if (res.code == 200) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.getDataList();
            }
          });
        } else {
          this.$message.error(res.message);
        }
      });
    }
    },
    /**修改满减设置 */
    dataFormSubmit() {
      let uploadForm = JSON.parse(JSON.stringify(this.editForm));
      uploadForm.list = JSON.stringify(uploadForm.list);

      this.$http({
        url: this.$http.newApi("/home/market/coupon/edit_reduction_info"),
        method: "post",
        data: this.$http.adornData(uploadForm)
      }).then(res => {
        this.visible = false;
        if (res.code == 200) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.getDataList();
            }
          });
        } else {
          this.$message.error(res.message);
        }
      });
    }
  }
};
</script>

<style lang="less">
.line {
  text-align: center;
  vertical-align: bottom;
}
.el-rowS {
  .el-row {
    .el-col {
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }
}

.itemCard {
  .el-card__header {
    padding: 8px 10px;
  }
}
</style>